<template>
  <div id="add_goods_app">
    <el-dialog title="新增" :visible.sync="isShow.flag" :fullscreen="true">
      <el-tabs v-model="active">
        <el-tab-pane label="基础信息" name="first">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="一级分类" prop="first_cateid">
              <el-select
                v-model="form.first_cateid"
                placeholder="请选择活动区域"
                @change="changeCate"
              >
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in cateList"
                  :key="cate.id"
                  >{{ cate.catename }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类" prop="second_cateid">
              <el-select
                v-model="form.second_cateid"
                placeholder="请选择活动区域"
              >
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in cate_children"
                  :key="cate.id"
                  >{{ cate.catename }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsname">
              <el-input v-model="form.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="零售价格" prop="price">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价格" prop="market_price">
              <el-input v-model="form.market_price"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-upload
                action=""
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :auto-upload="false"
                :limit="1"
                :on-change="change_img"
                :file-list="img_list"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="规格名称" prop="specsid">
              <el-select
                v-model="form.specsid"
                placeholder="请选择活动区域"
                @change="changeSpecs"
              >
                <el-option
                  :label="specs.specsname"
                  :value="specs.id"
                  v-for="specs in specsList"
                  :key="specs.id"
                  >{{ specs.specsname }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="规格属性" prop="specsattr">
              <el-select
                v-model="form.specsattr"
                placeholder="请选择活动区域"
                :multiple="true"
              >
                <el-option
                  :label="specs"
                  :value="specs"
                  v-for="(specs, index) in specs_children"
                  :key="index"
                  >{{ specs }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="是否热卖" prop="ishot">
              <el-radio-group v-model="form.ishot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否新品" prop="isnew">
              <el-radio-group v-model="form.isnew">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="second">
          <wangeditor
            ref="w_ref"
            v-model="form.description"
            width="100%"
            height="500"
            id="description"
          />
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import wangeditor from "vue-wangeditor";
import { mapActions, mapState } from "vuex";

var big = {
  first_cateid: "",
  second_cateid: "",
  goodsname: "",
  img: "",
  price: "",
  market_price: "",
  isnew: "",
  ishot: "",
  status: "",
  specsid: "",
  specsattr: [],
  description: "",
};

export default {
  data() {
    return {
      img_list: [],
      cate_children: [],
      specs_children: [],
      rules: {
        first_cateid: {
          required: true,
          message: "一级分类不可以为空",
          trigger: "blur",
        },
        second_cateid: {
          required: true,
          message: "二级分类不可以为空",
          trigger: "blur",
        },
        goodsname: {
          required: true,
          message: "商品名称不可以为空",
          trigger: "blur",
        },
        price: {
          required: true,
          message: "商品价格不可以为空",
          trigger: "blur",
        },
        market_price: {
          required: true,
          message: "市场价格不可以为空",
          trigger: "blur",
        },
        isnew: {
          required: true,
          message: "是否最新不可以为空",
          trigger: "blur",
        },
        ishot: {
          required: true,
          message: "是否热卖不可以为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "商品状态不可以为空",
          trigger: "blur",
        },
        specsid: {
          required: true,
          message: "商品规格不可以为空",
          trigger: "blur",
        },
        specsattr: {
          required: true,
          message: "商品规格属性不可以为空",
          trigger: "blur",
        },
      },
      form: { ...big },
      active: "first",
    };
  },
  created() {
    this.cateListActions();
    this.specsListActions({ page: 1, size:5 });
  },
  methods: {
    setDate(obj) {
      this.form = { ...obj };
      //删除多余的数据
      delete this.form.firstcatename;
      delete this.form.secondcatename;
      //二级分类
      this.changeCate(obj.first_cateid);
      //规格参数
      this.changeSpecs(obj.specsid);
      this.form.specsattr = obj.specsattr.split(",");
      //图片
      // 欺骗方法，手动构造图片对象，js当中{}代表对象，
      // 在{}当中填入图片对象必须有的属性url来构建一个假的图片对象，
      // 欺骗框架，框架加载当前路径上的图片
      this.img_list = obj.img !== "" ? [{ url: this.$url + obj.img }] : [];
      //富文本
      setTimeout(() => {
        console.log(obj.description);
        this.$refs.w_ref.setHtml(obj.description);
      }, 200);
    },
    change_img(file) {
      //收集图片
      this.form.img = file.raw;
    },
    // 提交
    submit() {
      //收集富文本
      this.form.description = this.$refs.w_ref.getHtml();
      //转化formdata
      var formdata = new FormData();

      this.form.specsattr = this.form.specsattr.join(",");

      for (let key in this.form) {
        formdata.append(key, this.form[key]);
      }
      //发起请求
      var url = "/goodsadd";
      if(this.form.id){
          url = "/goodsedit"
      }
      this.$axios.post(url, formdata).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          //清空表单
          this.form = { ...big };
          this.img_list=[],
          this.$refs.w_ref.setHtml("");
          //关闭模态框
          this.isShow.flag = false;
          //从载数据
          this.$emit("reload");
        }
      });
    },
    changeSpecs(id) {
      console.log(id);
      var index = this.specsList.findIndex((item) => {
        return item.id === id;
      });
      this.specs_children = this.specsList[index].attrs;
    },
    changeCate(id) {
      //所有数据再cateList
      var index = this.cateList.findIndex((item) => {
        return item.id === id;
      }); //查找所有的父级分类，id满足的返回当前分类的索引
      this.cate_children = this.cateList[index].children;
    },
    ...mapActions("cate_model", ["cateListActions"]), //加载分类
    ...mapActions("specs_model", ["specsListActions"]), //加载规格
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  props: ["isShow"],
  components: {
    wangeditor,
  },
  computed: {
    ...mapState("cate_model", ["cateList"]), //加载分类
    ...mapState("specs_model", ["specsList"]), //加载规格
  },
};
</script>

<style>
.wangEditor-container {
  height: 400px !important;
}
</style>